<template>
    <div class="managment">
        <div class="w100 haed bbg pr">
            <img class="fl hpd pa" style="height: 40rem;left: 20rem;top: 7rem;" src="../../assets/img/back.png"
                @click='back'>
            <p class="fz37 cfff hpd tc">订单管理</p>
        </div>
        <div class="body">
            <div class="main-x">
                <div class="search-x">
                    <div class="search pr ">
                        <input class="w100" placeholder="输入需要搜索的内容" type="text" v-model="searchTxt">
                        <a href="#" class="pa" @click="search()">
                            <img src="../../assets/img/cancel/search.png">
                        </a>
                    </div>
                </div>

                <el-row>
                    <el-col :span="12">
                        <div class="grid-content bg-purple">共<span>{{ orderListTemp.length }}</span>条</div>
                    </el-col>
                    <el-col :span="12">
                        <div class="grid-content bg-purple-light">
                            <el-dropdown trigger="click">
                                <span class="el-dropdown-link">
                                    {{ serve }}<i class="el-icon-arrow-down el-icon--right"></i>
                                </span>
                                <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item>
                                        <p @click="unfinished">待服务</p>
                                    </el-dropdown-item>
                                    <el-dropdown-item>
                                        <p @click="finished">已完成</p>
                                    </el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>
                        </div>
                    </el-col>
                </el-row>
                <div class="box" v-for=" (item, index) in orderListTemp">
                    <div class="head">
                        <p>订单号: <span>{{ item.orderCode }}</span> </p>
                        <p>￥{{ item.originPrice }}</p>
                    </div>
                    <div class="main">
                        <div>
                            <p>下单用户:</p>
                            <p>{{ item.userName }}</p>

                        </div>
                        <div>
                            <p>预约时间:</p>
                            <p>{{ change(item.createdDate) }}</p>

                        </div>
                        <div>
                            <p>服务项目:</p>
                            <p>{{ item.serviceItem }}</p>
                        </div>
                    </div>
                    <div class="foot">
                        <p>下单时间:<span>{{ change(item.bookingTime) }}</span></p>
                        <button class="btn" @click="viewDetails(item)"> 查看详情 </button>
                    </div>
                </div>
            </div>
        </div>

    </div>
</template>
<script>

import { number } from 'echarts'
import { businessList } from '../../api/index.js'
export default {
    data() {
        return {
            input: '',
            serve: '待服务',
            orderList: [],
            orderListTemp: [],
            searchTxt: '',
            serveTemp: [],
            
        }
    },
    created() {
        this.unfinished()
        
    },
    mounted() {
        // this.orderList = this.$route.params.data
        
        // console.log('Temp',this.orderList)
        // this.unfinished()
        // console.log('serveTemp',this.ok)
        businessList({ businessId: JSON.parse(localStorage.getItem('ID')) })
            .then(r => {
                // console.log('r', r)
                this.orderList = r.data;
                this.unfinished()
               
            })
       
    },
    methods: {
        back() {
            this.$router.push('/');
           
        },
        change(times) {
            for (let i = 0; i < this.orderList.length; i++) {
                var time = new Date(times);
                var y = time.getFullYear();
                var m = time.getMonth() + 1;
                var d = time.getDate();
                var h = time.getHours();	//返回时
                var mi = time.getMinutes();	//返回分钟
                var s = time.getSeconds();	//返回秒数
                var endTime = y + '-' + m + '-' + d + ' ' + h + ':' + mi + ':' + s;
                return endTime;
                // console.log('r3',endTime)
            }

        },
        viewDetails(item) {
            this.$router.push({
                name: 'indentDetails',
                params: {
                    item: item
                }
            });
        },
        unfinished() {
            this.serve = '待服务';
            this.orderListTemp = this.orderList.filter(value => {
                return value.orderStatus <= 2
            })
            // console.log('q',this.orderListTemp) 
            // console.log('q',JSON.parse(localStorage.getItem('ID'))) 
        },
        finished() {
            this.serve = '已完成';
            this.orderListTemp = this.orderList.filter(value => {
                return value.orderStatus >2
            })
            // console.log('q',this.orderListTemp)
        },
        search() {
            if (this.searchTxt == '') {
                // console.log('111')
                if (this.serve == '待服务') {
                    this.unfinished()
                } else {
                    this.finished()
                }
                return
            }
            if (this.searchTxt !== ' ') {
                businessList({ businessId: JSON.parse(localStorage.getItem('ID')), queryInfo: this.searchTxt })
                    .then(r => {
                        // console.log('搜索', r)
                        this.orderListTemp = r.data
                        // this.orderListTemp = this.orderList
                    })
            }


        },
      
        //搜索逻辑
        // search() {
        //     if (this.searchTxt == '') {
        //         // console.log('111')
        //         if (this.serve == '待服务') {
        //             this.unfinished()
        //         } else {
        //             this.finished()
        //         }
        //         return
        //     }
        //     if (this.searchTxt !== ' ') {
        //         // console.log('222')
        //         this.orderListTemp = this.orderListTemp.filter(value => {
        //             return value.orderCode == this.searchTxt
        //         })
        //     }
        // }


    }

}

</script>
<style scoped>
.managment {
    background-color: #f7f7f7;
}

.body {
    font-size: 23rem;
    position: relative;
    bottom: 270rem;
    margin: 0 20rem;

}

.main-x {

    border-radius: 15rem;
}

.search-x .search {
    padding: 0 40rem;
}

.search-x .search input {
    height: 80rem;
    border-radius: 40rem;
    padding: 0 28rem;
    box-sizing: border-box;
    border: none;
    outline: none;
    font-size: 22rem;
    color: #c3c3c3;
    /* background-color: #f7f7f7; */
}

.search-x .search input::-webkit-input-placeholder {
    color: #c3c3c3;
}

.search-x .search a {
    display: block;
    top: 27rem;
    right: 76rem;
    width: 27rem;
    height: 27rem;
}

.search-x .search a img {
    width: 100%;
}

.box {
    background-color: #fff;
    border-radius: 15rem;
    margin: 5rem;
    padding: 20rem 30rem 0 30rem;
    margin-bottom: 20rem;
}

.box span {
    margin-left: 10rem;
}

.foot,
.head {
    display: flex;
    justify-content: space-between;

}

.head {
    padding: 20rem 0;
    border-bottom: 7rem solid #f7f7f7;
}

.head p:first-child {
    font-weight: bold;
    font-size: 25rem;
}

.head p:last-child {
    color: red;
}

.head span {
    align-self: center;
}

.main {
    display: flex;
    flex-direction: column;
    border-bottom: 4rem solid #f7f7f7;
}

.main div {
    display: flex;
}

.main p {
    padding: 15rem 0;
    font-size: 23rem;
}

.main div p:last-child {
    width: 300rem;
}

.foot {
    padding: 15rem 0;
}

.foot p {
    color: #adadad;
    font-size: 20rem;
    align-self: center;
}

.foot button {
    height: 50rem;
    background-color: #0863e7;
    padding: 0 30rem;
    border-radius: 25rem;
    font-size: 23rem;
    border: none;
}

.btn {
    color: white;

}

.bg-purple {
    /* background: #d3dce6; */
}

.bg-purple-light {
    /* background: #e5e9f2; */
    text-align: right;
}

.grid-content {
    /* border-radius: 4px; */
    /* min-height: 36px; */
    padding: 20rem;
    color: #fff;
}

>>>.el-dropdown {
    color: #fff;
}

>>>.el-input-group__append,
.el-input-group__prepend {
    background-color: rgb(239, 239, 245);
    color: blue;
    border: none;

}

>>>.el-input-group--append .el-input__inner,
.el-input-group__prepend {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    border: none;
}
</style>